<template>
	<view>
		<view v-if="isShow" class='calendar-layer' :animation='animationData' :class="isShow ? 'show' : 'hide'">
			<!-- 遮罩层 -->
			<view class='layer-white-space' @tap='hideCalendar(false)'></view>

			<view class='layer-content' :class="(choice && mode=='two') ? '' : ''">
				<view class="layer-header">
					<text class="layer-title">{{title}}</text>
					<view class="layer-close" @tap='hideCalendar(false)'>
						<uni-icon size="24px" right=0 type="fanhuijiantou" ></uni-icon>
					</view>
					<!-- <view class="layer-close" @tap='hideCalendar(false)'></view> -->
				</view>
				<view class="layer-tip" v-if="desc!=''" @click="moKF(tel)" style="border-bottom: 0.5px solid #ddd;">
					<rich-text :nodes="desc"></rich-text>
				</view>
				<view class="layer-body">
					<view class="week-box">
						<text class="week-box-item" v-for="(item,tmpIndex) in weekNameArr" :key='tmpIndex'>{{item}}</text>
					</view>
					<!--  -->
					<scroll-view class='layer-list' scroll-y="true">
						<view v-for="(monthData,index) in date" :key="index" class="month">
							<view class="month-title" :id="'m-' + monthData[0].year + '-' + monthData[0].month" :style="'z-index:' + index">{{monthData[0].year +'年' + monthData[0].month + '月'}}</view>
							<view class="month-content">
								<view v-for="(data,index2) in monthData" :key="index2" class="day" :data-index="index" :data-indexs="index2"
								 :class="[data.className,(data.selected ? (mode==='one'?'':'active') + (data.date == choiceDate[0].date ? ' begin' : choiceDate.length>1 && data.date == choiceDate[1].date ? ' end' : '') : '')]"
								 :style="index2 == 0 ? 'margin-left:' +(weeks[index] == 0 ? 0 : weeks[index]) * (100 / 7) + '%':''" @tap="selectday">
									<view class="day-content">
										<!-- <text class="day-subject">
										    {{(data.date != today) && (data.date != tomorrow) && (data.date != afterTomorrow) ? data.act.subject :'' }}
										</text> -->
										<text class="day-txt">
										  {{(data.date == today ? '今天' : (data.date == tomorrow ? '明天' : (data.date == afterTomorrow ? '后天' : data.day)))}}
										</text>
										<view class="day-tip" v-if="data.data" >
											<slot :data="data.data" />
									    </view>
										<view v-else-if="mode=='two' && data.act.tip" class="day-tip" style="line-height: 1em;">
											{{data.act.tip}}
										</view>
										<text v-else class="day-lunar">
										  {{data.act.subject==undefined ? data.lunar : data.act.subject}}
										</text>
									</view>
									<view class="beginTip" v-if="choice===false">请选择离店日期</view>
									<view class="endTip" v-if="choice">{{dayCount2}}</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<!--  -->
				<!-- <view class='layer-footer'>
					<button class="weui-btn weui-btn_primary" style="width: 90%;" @tap="submitbtn">完成</button>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectDate:undefined,
				date: [],
				weeks: [],
				dayCount: 1,
				dayCount2: "共1晚",
				festival: {
					"0101": "元旦",
					"0214": "情人节",
					"0308": "妇女节",
					"0312": "植树节",
					"0401": "愚人节",
					"0405": "清明节",
					"0501": "劳动节",
					"0504": "青年节",
					"0512": "护士节",
					"0601": "儿童节",
					"0701": "建党节",
					"0801": "建军节",
					"0910": "教师节",
					"1001": "国庆节",
					"1006": "老人节",
					"1224": "平安夜",
					"1225": "圣诞节"
				},
				lunar:{
					tg: '甲乙丙丁戊己庚辛壬癸',
					dz: '子丑寅卯辰巳午未申酉戌亥',
					number: '一二三四五六七八九十',
					year: '鼠牛虎兔龙蛇马羊猴鸡狗猪',
					month: '正二三四五六七八九十冬腊',
					monthadd: [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334],
					calendar: [0xA4B, 0x5164B, 0x6A5, 0x6D4, 0x415B5, 0x2B6, 0x957, 0x2092F, 0x497, 0x60C96, 0xD4A, 0xEA5, 0x50DA9, 0x5AD, 0x2B6, 0x3126E, 0x92E, 0x7192D, 0xC95, 0xD4A, 0x61B4A, 0xB55, 0x56A, 0x4155B, 0x25D, 0x92D, 0x2192B, 0xA95, 0x71695, 0x6CA, 0xB55, 0x50AB5, 0x4DA, 0xA5B, 0x30A57, 0x52B, 0x8152A, 0xE95, 0x6AA, 0x615AA, 0xAB5, 0x4B6, 0x414AE, 0xA57, 0x526, 0x31D26, 0xD95, 0x70B55, 0x56A, 0x96D, 0x5095D, 0x4AD, 0xA4D, 0x41A4D, 0xD25, 0x81AA5, 0xB54, 0xB6A, 0x612DA, 0x95B, 0x49B, 0x41497, 0xA4B, 0xA164B, 0x6A5, 0x6D4, 0x615B4, 0xAB6, 0x957, 0x5092F, 0x497, 0x64B, 0x30D4A, 0xEA5, 0x80D65, 0x5AC, 0xAB6, 0x5126D, 0x92E, 0xC96, 0x41A95, 0xD4A, 0xDA5, 0x20B55, 0x56A, 0x7155B, 0x25D, 0x92D, 0x5192B, 0xA95, 0xB4A, 0x416AA, 0xAD5, 0x90AB5, 0x4BA, 0xA5B, 0x60A57, 0x52B, 0xA93, 0x40E95]
				},
				haveOrder: [],
				dateFlag: {},
				choice: "",
				today: 0,
				choiceDate: [],
				choiceDateArr: [],
				tomorrow: 0,
				afterTomorrow: 0,
				weekNameArr: ['日', '一', '二', '三', '四', '五', '六'],
				animationData: null,
				curScrollTop: 0,
				monthTitleRectList: [],
				fixedId: '',
				layerTop: 0,
				//用来重置的
				bak_date: [],
				bak_weeks: [],
				bak_choiceDate: [],
				bak_choiceDateArr: [],
				isShow: ""
			}
		},
		components: {},
		props: {
			showPass:{
				type: Boolean,
				default: true
			},
			mode:{
				type: String,
				default: 'two'
			},
			title:{
				type: String,
				default: '选择日期'
			},
			desc:{
				type: String,
				default: ''
			},
			tel:{
				type: String,
				default: ''
			},
		    defaultDay:{
				type: [Number,String],
				default: 1
			},
			daysCount:{
				type: [Number,String],
				default: 30
			},
			defaultLoad:{
				type: [Boolean,String],
				default: true
			},
			isCheck:{
				type: [Boolean,String],
				default: false
			}
			/* items:[] */
		},
		onLoad() {
			//#ifndef H5
			// 弹出层动画创建
			this.animation = uni.createAnimation({
				duration: 400, // 整个动画过程花费的时间，单位为毫秒
				timingFunction: "ease", // 动画的类型
				delay: 0 // 动画延迟参数
			})
			//#endif
		},
		created() {
			//#ifdef H5
			//#endif
			if(this.defaultLoad==true || this.defaultLoad=="true")
			{
				this.dateData();
				this.submitbtn();
			}
		},
		methods: {
			moKF:function(tel){
				if(tel!=""){
					uni.makePhoneCall({
						phoneNumber: tel
					});
				}
			},
			checkDate:function(data){
				if(data==undefined)
				{
					return true;
				}else{
					return this.$emit("check", data);
				}
			},
			getLayerTop: function() {
				return new Promise(resolve => {
					//获取layer-list窗器的top
					let view2 = uni.createSelectorQuery().select(".layer-list");
					view2.boundingClientRect(data => {
						resolve(data.top);
					}).exec();
				});
			},
			getMonthTitleRectList: function() {
				return new Promise(resolve => {
					//获取每个月的文字头的top
					let view = uni.createSelectorQuery().selectAll(".month-title");
					view.boundingClientRect(data => {
						resolve(data);
					}).exec();
				});
			},
			getRectList: async function() {
				if (!this.layerTop || this.layerTop < 0) this.layerTop = await this.getLayerTop();
				var isInitRectData = true;
				if (this.monthTitleRectList && this.monthTitleRectList.length > 0) {
					if (this.monthTitleRectList[0].top == 0) {
						this.monthTitleRectList = await this.getMonthTitleRectList();
						isInitRectData = false;
					}
				} else {
					isInitRectData = false;
				}
				if (isInitRectData == false) this.monthTitleRectList = await this.getMonthTitleRectList();
			},
			showCalendar: function(items,selectDate,load) {
				if(selectDate && this.selectDate!=selectDate){
					this.selectDate = selectDate;
					this.today = 0;
				} 
				if(load) this.today = 0;
				this.dateData(items);
				
				//存储未更新前的数据
				this.bak_date = JSON.parse(JSON.stringify(this.date));
				this.bak_weeks = JSON.parse(JSON.stringify(this.weeks));
				this.bak_choiceDate = JSON.parse(JSON.stringify(this.choiceDate));
				this.bak_choiceDateArr = JSON.parse(JSON.stringify(this.choiceDateArr));
                this.isShow = true;
			},
			hideCalendar: function(isBtnClick) {
                this.isShow = false;

				//SubmitisBtnClick判断是否为按钮点击
				if (isBtnClick || this.mode=="one") return;

				//非按钮点击则重置已选择的
				this.dateFlag = {};
				this.choice = "";
				this.dayCount = 1;
				this.dayCount2 = "共" + this.dayCount + "晚";
				//
				this.date = JSON.parse(JSON.stringify(this.bak_date));
				this.weeks = JSON.parse(JSON.stringify(this.bak_weeks));
				this.choiceDate = JSON.parse(JSON.stringify(this.bak_choiceDate));
				this.choiceDateArr = JSON.parse(JSON.stringify(this.bak_choiceDateArr));
			},
		    getLunarDate:function(date) {
				var year, month, day;
				if (!date) {
					date = new Date(), year = date.getFullYear(), month = date.getMonth(), day = date.getDate();
				} else {
					date = date.split('-'), year = parseInt(date[0]), month = date[1] - 1, day = parseInt(date[2]);
				}
		
				if (year < 1921 || year > 2020) {
					return {}
				}
		
				var total, m, n, k, bit, lunarYear, lunarMonth, lunarDay;
				var isEnd = false;
				var tmp = year;
				if (tmp < 1900) {
					tmp += 1900;
				}
				total = (tmp - 1921) * 365 + Math.floor((tmp - 1921) / 4) + this.lunar.monthadd[month] + day - 38;
				if (year % 4 == 0 && month > 1) {
					total++;
				}
				for (m = 0;; m++) {
					k = (this.lunar.calendar[m] < 0xfff) ? 11 : 12;
					for (n = k; n >= 0; n--) {
						bit = (this.lunar.calendar[m] >> n) & 1;
						if (total <= 29 + bit) {
							isEnd = true;
							break;
						}
						total = total - 29 - bit;
					}
					if (isEnd) break;
				}
				lunarYear = 1921 + m;
				lunarMonth = k - n + 1;
				lunarDay = total;
				if (k == 12) {
					if (lunarMonth == Math.floor(this.lunar.calendar[m] / 0x10000) + 1) {
						lunarMonth = 1 - lunarMonth;
					}
					if (lunarMonth > Math.floor(this.lunar.calendar[m] / 0x10000) + 1) {
						lunarMonth--;
					}
				}
		
				return {
					lunarYear: lunarYear,
					lunarMonth: lunarMonth,
					lunarDay: lunarDay,
				};
			},
			getLunarDateString:function (lunarDate) {
				if(!lunarDate) return;
				if (!lunarDate.lunarDay) return;
				var data = {},
					lunarYear = lunarDate.lunarYear,
					lunarMonth = lunarDate.lunarMonth,
					lunarDay = lunarDate.lunarDay;
		
				data.tg = this.lunar.tg.charAt((lunarYear - 4) % 10);
				data.dz = this.lunar.dz.charAt((lunarYear - 4) % 12);
				data.year = this.lunar.year.charAt((lunarYear - 4) % 12);
				data.month = lunarMonth < 1 ? '(闰)' + this.lunar.month.charAt(-lunarMonth - 1) : this.lunar.month.charAt(lunarMonth - 1);
		
				data.day = (lunarDay < 11) ? "初" : ((lunarDay < 20) ? "十" : ((lunarDay < 30) ? "廿" : "三十"));
				if (lunarDay % 10 != 0 || lunarDay == 10) {
					data.day += this.lunar.number.charAt((lunarDay - 1) % 10);
				}
				data.text = (data.day=="初一" ? data.month + "月" : data.day);
				return data;
			},
			setData: function(obj) {
				let that = this;
				let keys = [];
				let val, data;
				Object.keys(obj).forEach(function(key) {
					keys = key.split('.');
					val = obj[key];
					data = that.$data;
					keys.forEach(function(key2, index) {
						if (index + 1 == keys.length) {
							that.$set(data, key2, val);
						} else {
							if (!data[key2]) {
								that.$set(data, key2, {});
							}
						}
						data = data[key2];
					})
				});
			},
			onScroll: function(e) {
			},
			dateData: function(items) {
				if(this.today>0) return;
				
				let dataAll = []; //总日历数据
				let dataAll2 = []; //总日历数据
				let dataMonth = []; //月日历数据
				let date = new Date(); //当前日期
				let getDateTime = date.getTime();
				let year = date.getFullYear(); //当前年
				let week = date.getDay(); //当天星期几
				let weeks = [];
				let month = date.getMonth() + 1; //当前月份
				let day = date.getDate(); //当天
				let daysCount = parseInt(this.daysCount); //一共显示多少天
				let lastDay =  new Date();
                lastDay.setDate(lastDay.getDate() + daysCount); //显示的最后一天
				let lastYear = lastDay.getFullYear();
				let dayscNow = 0; //计数器
			    let passDay = 0; //当月当天以前的天数
				let monthList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; //月份列表
				let nowMonthList = []; //本年剩余年份
				this.today = "" + year + (month.toString().length==1 ? "0" : "") + month + (day.toString().length==1 ? "0" : "") + day;
				this.tomorrow = "" + year + month + (day + 1);
				this.afterTomorrow = "" + year + month + (day + 2);

				for (let i = month; i < 13; i++) {
					if (i < 10) {
						nowMonthList.push("0" + i);
					}else{
						nowMonthList.push(i)
					}
				}
				let yearList = [year] //年份最大可能
				for (let i = 0; i < (lastYear-year); i++) {
					yearList.push(year + i + 1)
				}
				let leapYear = function(Year) { //判断是否闰年 
					if (((Year % 4) == 0) && ((Year % 100) != 0) || ((Year % 400) == 0)) {
						return (true);
					} else {
						return (false);
					}
				}
		
				for (let i = 0; i < yearList.length; i++) { //遍历年
					let mList
					if (yearList[i] == year) { //判断当前年份
						mList = nowMonthList
					} else {
						mList = monthList
					}

					for (let j = 0; j < mList.length; j++) { //循环月份
					    if(dayscNow > daysCount){
							break;
						}
						dataMonth = []
						let t_days = [31, 28 + leapYear(yearList[i]), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
						let t_days_thisYear = []
						if (yearList[i] == year) {
							for (let m = 0; m < nowMonthList.length; m++) {
								t_days_thisYear.push(t_days[mList[m] - 1])
							}
							t_days = t_days_thisYear
						} else {
							t_days = [31, 28 + leapYear(yearList[i]), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
						}
						let mk = 0;
						if(!this.showPass){
							if(mList[j]==month){
								mk = day - 1; //这里代码设置是否显示当月以前的日期
							}
						} else{
							if(mList[j]==month){
								passDay =  day - 1; //这里代码设置是否显示当月以前的日期
							}
						}
						for (let k = mk; k < t_days[j]; k++) { //循环每天
						    if(!this.showPass){
								dayscNow++;
							}else{
								if(mList[j]==month && k >= day - 1){
									dayscNow++;
								}else if(mList[j]!=month){
									dayscNow++;
								}
							}
							let nowData;
							// if (dayscNow > daysCount) {
							// 	break;
							// }else{ 
								//如果计数器没满
								let days = k + 1;
								if (days < 10) {
									days = "0" + days;
								}

								var monthAndDay = mList[j] + "" + days;
								var dateString = yearList[i] + "-" + mList[j] + "-" + days;

								var subject = this.festival[monthAndDay];
								var none = false;
								let newDateFormate = new Date(yearList[i] + "/" + mList[j] + "/" + (k + 1));
								let thisDateTime = newDateFormate.getTime();
								var selected = 0;
								var itemKey = yearList[i] + "-" + mList[j] + "-" + (k<9 ? "0" : "") + (k + 1);
								var data = (items ? (items[itemKey] ? items[itemKey] : { "Disabled":1 } ) : undefined);

                                nowData = {
									year: yearList[i],
									month: mList[j],
									act: {
										subject,
										none,
										tip: '',
										defaultStr: 0
									},
									data:data,
									day: k + 1,
									date: yearList[i] + "" + mList[j] + days,
									selected,
									re: yearList[i] + "-" + mList[j] + "-" + days,
									dateTime: thisDateTime
								}
								nowData.lunar = this.getLunarDateString(this.getLunarDate(nowData.re)).text;
								if(dayscNow > daysCount){
									nowData.className = "future";
								}else if(mList[j]==month && k < day - 1){
									nowData.className = "disabled";
								}
								dataMonth.push(nowData)
									
								if (yearList[i] == year && mList[j] == month) { //判断当年当月
									if (this.showPass || (!this.showPass &&  k + 1 >= day)) {
										if(this.showPass) {
											if (k == 0) {
												let date = new Date(yearList[i] + "/" + mList[j] + "/" + (k + 1));
												let weekss = date.getDay(); //获取每个月第一天是周几
												weeks.push(weekss);
											}
										}else{
											if ((k+1) == day) {
												let date = new Date(yearList[i] + "/" + mList[j] + "/" + (k + 1));
												let weekss = date.getDay(); //获取每个月第一天是周几
												weeks.push(weekss);
											}
										}
									}
								} else { //其他情况
									if (k == 0) {
										let date = new Date(yearList[i] + "/" + mList[j] + "/" + (k + 1));
										let weekss = date.getDay(); //获取每个月第一天是周几
										weeks.push(weekss);
									}
								}
							//}
						}
						dataAll.push(dataMonth);
					}
				}
				for (let i = 0; i < dataAll.length; i++) {
					if (dataAll[i].length != 0) {
						dataAll2.push(dataAll[i]);
					}
				}
				
				//重新计算默认天数
				var dfDay;
				if(this.selectDate){
					var cDate = new Date(year,month-1,day);
					var sDate = new Date(this.selectDate);
					var days = sDate.getTime() - cDate.getTime();
					var time = parseInt(days / (1000 * 60 * 60 * 24));
					dfDay = time + 1;
				}else{
					dfDay = this.defaultDay;
				}
				dfDay = dfDay + passDay;
				
                if(dfDay>0)
				{
					var firstIndex = 0;
					var secondIndex = 0;
					if(dfDay>1)
					{
						if(dfDay>dataAll2[0].length)
						{
							firstIndex++;
							secondIndex = (dfDay - dataAll2[0].length) - 1;
						}else{
							secondIndex = dfDay - 1;
						}
					}
					
					if(this.mode==="one")
					{
						dataAll2[firstIndex][secondIndex].selected = 1;
						dataAll2[firstIndex][secondIndex].act.defaultStr = 1;
						
						if(this.choiceDate.length==0)
						{
							this.choiceDate.push(dataAll2[firstIndex][secondIndex]);
						}else{
							this.$set(this.choiceDate,0,dataAll2[firstIndex][secondIndex]);
						}
					}else{
						dataAll2[firstIndex][secondIndex].selected = 1;
						dataAll2[firstIndex][secondIndex].act.tip = "入住";
						dataAll2[firstIndex][secondIndex].act.defaultStr = 1;
						
						this.choiceDate.push(dataAll2[secondIndex][secondIndex]);
						if (dataAll2[firstIndex][secondIndex+1]) {
							dataAll2[firstIndex][secondIndex+1].selected = 1;
							dataAll2[firstIndex][secondIndex+1].act.tip = "离店";
							dataAll2[firstIndex][secondIndex+1].act.defaultStr = 1;
							this.choiceDate.push(dataAll2[firstIndex][secondIndex+1]);
						} else {
							dataAll2[firstIndex+1][0].selected = 1;
							dataAll2[firstIndex+1][0].act.tip = "离店";
							dataAll2[firstIndex+1][0].act.defaultStr = 1;
							this.choiceDate.push(dataAll2[firstIndex+1][0]);
						}
					}
				}
                
				//console.log(dataAll2, weeks, this.today, this.tomorrow, this.afterTomorrow);
				this.date = dataAll2;
				this.weeks = weeks;
				this.choiceDate = this.choiceDate;
				this.choiceDateArr = this.choiceDate;
			},
			selectday: function(e) {
				var indexs = e.currentTarget.dataset.indexs;
				var index = e.currentTarget.dataset.index;
                var th = this;
				
				if (indexs == -1) {
					return
				}

                if(this.mode=="one")
                {
					//this.date[index][indexs].selected = 1;
					//this.choiceDate[0] = this.date[index][indexs];
					this.choiceDateArr[0] = this.date[index][indexs];

					// if(this.choiceDateArr[0].data && this.choiceDateArr[0].data.Disabled===1)
					// {
					// 	uni.showToast({title:"该日期不可选",icon:"none",duration:2500});
					// 	return;
					// }
					this.choice = true;
					this.dayCount = 1;
					
					if(this.choiceDateArr[0].className=="disabled"){
						uni.showToast({title:"该日期不可选",icon:"none",duration:2500});
						return;
					}else if(this.choiceDateArr[0].className=="future"){
						uni.showToast({title:"该日期不可选",icon:"none",duration:2500});
						return;
					}
					
					// if(new Date(this.choiceDateArr[0].re)<new Date(this.today)){
					// 	uni.showToast({title:"该日期不可选",icon:"none",duration:2500});
					// 	return;
					// }
					
                	//关闭日期返回结果
                	this.submitbtn(function(){
						th.date[index][indexs].selected = 1;
						th.choiceDate[0].selected = 1;
					});
					return;
					//if(this.choiceDateArr[0])
                }
				this.date[index][indexs].selected = 1;
				this.date[index][indexs].act.tip = "入住";

				if (this.dateFlag.date && this.date[index][indexs].dateTime < this.dateFlag.date.dateTime) {
					var flagIndex = this.dateFlag.index;
					var flagIndexs = this.dateFlag.indexs;
					this.date[flagIndex][flagIndexs].selected = 0;
					this.date[flagIndex][flagIndexs].act.tip = "";
					this.dateFlag = {
						date: this.date[index][indexs],
						index: index,
						indexs: indexs
					};
					this.choice = false;
					this.dayCount = 1;
					//
					this.choiceDate[0] = this.date[index][indexs];
				} else if (this.dateFlag && this.dateFlag.date) {
					if (this.dateFlag.index == index && this.dateFlag.indexs == indexs) {
						return;
					}
					this.date[index][indexs].act.tip = "离店";
					//
					var that = this;
					var dateFlagDateTime = that.dateFlag.date.dateTime;
					var choiceDateTime = that.date[index][indexs].dateTime;
					that.choiceDateArr = [];
					that.choiceDateArr.push(that.dateFlag.date);
					var nonFlag = false;
					var nonArr = [];
					var count = 0;
					this.date.forEach(function(dataItems) {
						dataItems.forEach(function(dataItem) {
							if (dataItem.dateTime > dateFlagDateTime && dataItem.dateTime < choiceDateTime) {
								if (dataItem.act.none) {
									nonFlag = true;
									nonArr.push(dataItem.day);
								}
								that.choiceDateArr.push(dataItem);
								dataItem.selected = 1;
								count++;
							}
						})
					})
					that.choiceDateArr.push(that.date[index][indexs]);
					//设置开始和结果两个日期
					this.choiceDate[0] = that.choiceDateArr[0];
					this.choiceDate[1] = that.choiceDateArr[that.choiceDateArr.length - 1];
					//
					if (nonFlag) {
						var that = this;
						this.date.forEach(function(dataItems) {
							dataItems.forEach(function(dataItem) {
								if (dataItem.dateTime != choiceDateTime) {
									dataItem.act.tip = ""
									dataItem.selected = 0
								} else {
									dataItem.act.tip = "入住"
								}
							})
						})
						this.dateFlag = {
							date: that.date[index][indexs],
							index: index,
							indexs: indexs
						};
						this.choiceDate[0] = that.date[index][indexs];
						this.dayCount = 1;
						var nonstr = "";
						nonArr.forEach(function(nonitem, index) {

							if (index != nonArr.length - 1) {
								nonstr = nonstr + nonitem + "号,"
							} else {
								nonstr = nonstr + nonitem + "号"
							}
						})
						uni.showModal({
							title: '提示',
							content: `${nonstr}无房`,
						})
					} else {
						this.dateFlag = {};
						this.choice = true;
						this.dayCount = count + 1;
						this.dayCount2 = "共" + (count + 1) + "晚";
						var th1 = this;
						setTimeout(function(){
							th1.submitbtn();
						},500);
					}
				} else {
					var that = this;
					this.date.forEach(function(dataItems) {
						dataItems.forEach(function(dataItem) {
							dataItem.act.defaultStr = 0;
							if (dataItem.dateTime != that.date[index][indexs].dateTime) {
								dataItem.selected = 0;
								dataItem.act.tip = "";
							} else {
								dataItem.act.tip = "入住";

							}
						})
					})
					this.dateFlag = {
						date: this.date[index][indexs],
						index: index,
						indexs: indexs
					};
					this.choice = false;
					this.dayCount = 1;
					//
					this.choiceDate[0] = this.date[index][indexs];
				}
			},
			submitbtn: function(subSuccess) {
				var tmChoiceDate = [];
				var tmDayCount2 = "";
				var th = this;
				  
				if(th.mode=="one")
				{
					tmChoiceDate[0] = th.choiceDateArr[0];
					tmChoiceDate[1] = th.choiceDateArr[0];
					tmDayCount2 = "共" + th.dayCount + "天";
				}else{
					tmChoiceDate[0] = th.choiceDateArr[0];
					tmChoiceDate[1] = th.choiceDateArr[th.choiceDateArr.length - 1];
					tmDayCount2 = "共" + th.dayCount + "晚";
				}
				/**派发事件 
				 * 参数：
				 * 1.choiceDate 时间区间（开始时间和结束时间）
				 * 2.dayCount 共多少晚
				 */

				var setDate = function(){
					if(subSuccess && typeof subSuccess ==="function") subSuccess();
					
                    th.choiceDate = tmChoiceDate;
					th.dayCount2 = tmDayCount2;
					th.hideCalendar(true);
				}
				
				var isSuccess = undefined;
				this.$emit("change", {
					choiceDate: tmChoiceDate,
					dayCount: this.dayCount,
					success:function(res){
						isSuccess = res;
						if(isSuccess) setDate();
					}
				});
				
				setTimeout(function(){
					if(isSuccess==undefined)
					{
						setDate();
					}
				},100);
			},
		},
	}
</script>

<style lang="scss" scoped>
	/*  #ifndef  H5  */
	view {
		display: flex;
	}
	/*  #endif  */
	
	
	/*  #ifdef  H5  */
	uni-view {
		display: flex;
	}
	/*  #endif  */


	.layer-white-space {
		position: fixed;
		height: 100%;
		width: 100%;
		// background-color: #ccc;
		// opacity: .5;
		background-color: rgba(0, 0, 0, 0.8);
	}

	.layer-header {
		height: 44px;
		background-color: $uni-theme-color;
		color: #FFFFFF;
		align-items: center;
		position: relative;
		.layer-close {
			position: absolute;
			left: 15px;
			top: 50%;
			transform: translateY(-50%);
		}

		.layer-title {
			text-align: center;
			flex: 1;
			font-size: 32upx;
		}
	}
	
	.layer-tip {
		position: relative;
		padding: 7px 15px;
		background-color: #fff7e0;
		font-size: 12px;
		color: #481a03;
		line-height: 18px;
		text-align: left;
		.tip-txt {
			display: inline-block;
			padding-left: 8px;
		}
	}
	.calendar-layer {
		position: fixed;
		bottom: -100%;
		height: 0;
		width: 100%;
		overflow: hidden;
		z-index: 998;

		
		//h5使用css3动画
		&.show {
			bottom: 0;
			height: 100%;
			transition: bottom 0.4s;
		}

		//h5使用css3动画
		&.hide {
			bottom: -100%;
			height: 100%;
			transition: bottom 0.4s;
		}
	}

	.layer-content {
		position: absolute;
		height: 100%;
		bottom: 0;
		top: 0;
		font-size: 26upx;
		flex-direction: column;
		background-color: #FFF;
	}

	.layer-body {
		flex-direction: column;
		height: calc(100% - 88upx);
	}

	.layer-list {
		// position: absolute;
		// height:300upx;
		width: 100%;
		height: calc(100% - 88upx);
		// bottom: 0upx;
		display: flex;
		flex: 1;
		flex-direction: column;
		position: relative;
	}

	.layer-footer {
		width: 100%;
		height: 120upx;
		align-items: center;
		justify-items: center;
		display: none;
	}

	.layer-content.choiceDate {
		// .layer-footer {
		// 	display: block;
		// }

		// .layer-body {
		// 	height: calc(100% - 70upx - 120upx);
		// }
	}

	.submitBtn {
		height: 80upx;
		line-height: 80upx;
		color: #FFF;
		border-radius: 10upx;
		margin: 20upx 50upx;
		justify-content: center;
		font-size: 32upx;
		background: linear-gradient(to right, #F5504F, #F43F4F);
	}

	.month {
		width: 750upx;
		flex-direction: column;
		margin-bottom: 50upx;

		.month-title {
			font-size: 30upx;
			text-align: center;
			width: 100%;
			height: 60upx;
			line-height: 60upx;
			justify-content: center;
			background: #f7f7f7;
		}

		&.fixed {
			.month-title {
				position: fixed;
				top: calc(15% + 70upx + 60upx);
				z-index: 11
			}

			&:first-child {
				padding-top: 60upx;
			}
		}

		// 		&:first-child {
		// 			.month-title {
		// 				border: 0;
		// 			}
		// 		}
		&:last-child {
			margin-bottom: 0;
		}

		.month-content {
			padding-top: 16upx;
			flex-wrap: wrap;
		}
	}

	.day {
		width: calc(100%/7);
		text-align: center;
		min-height: 70upx;
		padding: 20upx 0px;
		align-items: center;
		justify-content: center;
		position: relative;

		.day-content {
			flex-direction: column;
			line-height: 1;
		}

		.day-txt {
			width: 100%;
			font-size: 16px;
			font-weight: bold;
			line-height: 1.2;
			overflow: hidden;
			color: $uni-theme-color;
		}

		.day-tip {
			font-size: 20upx;
			min-height: 1.2em;
		}
		
		.day-lunar{
			font-size: 10px;
			color: #999999;
			padding-top: 2px;
			font-family: cursive;
		}

		.day-subject {
			// margin-top: 5upx;
			font-size: 14upx;
			height: 1.2em;
		}

		&.disabled {
			color: #ccc;
			.day-lunar{
				color: #ccc;
			}
			.day-txt{
				color: #ccc;
			}
		}
		
		&.future {
			color: #ccc;
			.day-lunar{
				color: #ccc;
			}
			.day-txt{
				color: #333;
			}
		}

		&.active {
			background: #FEEEEF;
		}

		.beginTip {
			display: none;
			//////////////////////////////
			/*  #ifndef  H5  */
			width: 185upx;
			margin-top: -70upx;
			/*  #endif  */
			//////////////////////////////
			/*  #ifdef  H5  */
			width: 180upx;
			margin-top: -74upx;
			/*  #endif  */
			//////////////////////////////
			position: absolute;
			background: rgba(0, 0, 0, 0.6);
			border-radius: 5upx;
			text-align: center;
			padding: 6upx 10upx;
			font-size: 22upx;
			z-index: 33;

			&::after {
				content: "";
				position: absolute;
				/*  #ifndef  H5  */
				left: 35%;
				top: 28upx;
				border: 5upx solid transparent;
				border-top: 6upx solid rgba($color: #000000, $alpha: 0.6);
				/*  #endif  */

				/*  #ifdef  H5  */
				left: 35%;
				top: 37upx;
				border: 8upx solid transparent;
				border-top: 10upx solid rgba($color: #000000, $alpha: 0.6);
				/*  #endif  */
			}
		}

		.endTip {
			display: none;
			background: rgba($color: #000000, $alpha: 0.6);
			position: absolute;
			border-radius: 5upx;
			text-align: center;
			padding: 6upx 10upx;
			// min-width: 70upx;
			//////////////////////////////
			/*  #ifndef  H5  */
			margin-top: -70upx;
			/*  #endif  */
			//////////////////////////////
			/*  #ifdef  H5  */
			margin-top: -74upx;
			/*  #endif  */
			//////////////////////////////
			font-size: 22upx;
			left: 12%;
			z-index: 33;

			&::after {
				content: "";
				position: absolute;

				/*  #ifndef  H5  */
				left: 35%;
				top: 28upx;
				border: 5upx solid transparent;
				border-top: 6upx solid rgba($color: #000000, $alpha: 0.6);
				/*  #endif  */

				/*  #ifdef  H5  */
				left: 35%;
				top: 37upx;
				border: 8upx solid transparent;
				border-top: 10upx solid rgba($color: #000000, $alpha: 0.6);
				/*  #endif  */
			}
		}

		&.begin,
		&.end {
			background: $uni-main-color;
			color: #FFF;
			.day-lunar{
				color: #FFF;
			}
			.day-txt{
				color: #ffffff;
			}
		}

		&.begin {
			border-radius: 8upx 0 0 8upx;

			.beginTip {
				display: block;
			}
		}

		&.end {
			border-radius: 0 8upx 8upx 0;

			.endTip {
				display: block;
			}
		}
	}


	/* ///////////////////////////////////////// */
	.week-box {
		height: 60upx;
		line-height: 60upx;
		background: $uni-theme-color;
		position: relative;
		z-index: 11;
	}

	.week-box-item {
		width: calc(100%/7);
		text-align: center;
        color:#ffffff;
		&:first-child,
		&:last-child,
			{
			color: #ffffff;
		}
	}

	/* ///////////////////order-time////////////////////// */
	.order-time {
		position: relative;
		width: 100%;
		padding: 25upx 15upx;
	}

	.order-time::after {
		position: absolute;
		content: "";
		width: 100%;
		bottom: 0;
		left: 0;
		border-top: 1upx solid #eee;
		transform-origin: 0 100%;
		transform: scaleY(0.5);
	}

	.goInHotel {
		margin-left: 20upx;
		font-size: 26upx;
		color: gray;
	}

	.goInHotel2 {
		font-size: 26upx;
		color: gray;
	}

	.date-wrappper {
		position: relative;
		padding: 0 10upx;
		font-size: 32upx;
		color: black;
	}

	.left-hotel {
		margin-left: 40upx;
		font-size: 26upx;
		color: gray;
	}

	.order-time .sumCount {
		color: #6495ed;
		float: right;
		margin-right: 15upx;
		font-size: 26upx;
		padding-top: 10upx;
	}
</style>
